<template>
	<hr class="two" />

	<h2>==== WatchEffect ===</h2>

	<h4>当前求和为：{{ sum }}</h4>
	<button @click="sum++">点我+1</button>
	<hr>
	<h5>当前的信息为：{{ msg }}</h5>
	<button @click="msg+='！'">修改信息</button>
	<hr>
	<h5>姓名：{{ person.name }}</h5>
	<h5>年龄：{{ person.age }}</h5>
	<h5>薪资：{{ person.job.j1.salary }}K</h5>
	<button @click="person.name+='~'">修改姓名</button>
	<button @click="person.age++">增长年龄</button>
	<button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import {ref, reactive, watch, watchEffect} from 'vue'

export default {
	name: 'WatchEffect',
	setup() {
		//数据
		let sum = ref(0)
		let msg = ref('你好啊')
		let person = reactive({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})

		//监视
		/* watch(sum,(newValue,oldValue)=>{
			console.log('sum的值变化了',newValue,oldValue)
		},{immediate:true}) */

		// 函数体 中用到谁就监视谁,注重过程，函数体内容  -- 计算属性 更注重结构--> 需要返回值
		watchEffect(() => {
			const x1 = sum.value
			person.job.j1.salary
			// console.log('有人使用数据，就只监视这些数据-')
		})

		//返回一个对象（常用）
		return {
			sum,
			msg,
			person
		}
	}
}
</script>

